<template>
	<view class="Meeting">
		<view class="Booking" @click="Booking()">
			<image src="../../../../static/logo.png"></image>
			<view class="Booking_right">
				<view class="Booking_name">
					<view class="name">会议室1</view>
					<text>4月12日</text>
				</view>
				<view class="overtimes">
					<view class="overtime_left">
						<text>预约时间：</text>
						<view class="time">14:00~16:00</view>
					</view>
					<view class="overtime">加时</view>
				</view>
				<view class="Booking_time">
					<view>
						<text>预约时间：</text><span>2小时</span>
					</view>
					<view class="examine">审核中</view>
				</view>	
				<view class="Booking_address">
					<text>预约地址：</text><view>腾飞工业大厦A座CD区4楼</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<text>取消加时</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			Booking(){
				uni.navigateTo({
					url:'./BookingDetails/BookingDetails'
				})
			}
		}
	}
</script>

<style lang="less">
.Meeting {
	background: #f2f2f2;
	height: 90.4vh;
	padding: 20upx;
	.Booking {
		width: 710upx;
		height: 800upx;
		background: #FFFFFF;
		box-shadow: 0px 3px 30px 0px rgba(204, 204, 204, 0.32);
		border-radius: 20px;
		text-align: center;
			image {
				width: 500upx;
				height: 420upx;
				border-radius: 12px;
				    margin: 15px 0;
			}
			.Booking_right{
				width: 500upx;
				margin: auto;	
				text{
					font-size: 24upx;
					color: #999999;
				}
				.Booking_name{
					display: flex;
					justify-content: space-between;
					.name{
						font-size: 28upx;
						color: #333333;
					}
				}
				.overtimes{
					display: flex;
					justify-content: space-between;
					.overtime_left{
						width: 64px;
					}
					.time{
						font-size: 36upx;
						color: #333333;
						
					}
					.overtime{
						    border: 1px solid #f2f2f2;
						    border-radius: 30px;
						    height: 22px;
						    padding: 4px 19px;
						    color: #999999;
						    font-size: 15px;
						    margin-top: 10px;
					}
				}
				.Booking_time{
					display: flex;
					justify-content: space-between;
					    margin: 10px 0;
					span{
						font-size: 26upx;
					}
					.examine{
						color: #E50012;
						font-size: 26upx;
					}
				}
				.Booking_address {
					display: flex;
					font-size: 26upx;
					image {
						width: 36upx;
						height: 36upx;
					}
				}
			}
	}
	.bottom{
		    width: 250px;
		    height: 44px;
		    background: #E50012;
		    border-radius: 22px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: #ffffff;
		    margin: 200upx auto;
	}
}
</style>
